<template>
    <div class="container">
        <v-container>
            <h4 class="mb-3">常见问题管理</h4>
        </v-container>

        <v-row align="center">
           <v-col :md="4" :sm="6">
                <v-text-field
                    label="标题"
                    v-model="queryTitle"
                    clearable
                    type="text">
                </v-text-field>
            </v-col>
            <v-col :md="4" :sm="6">
                <v-btn
                    dark
                    class="mb-2 mr-2"
                    @click="query()"
                >查询
                </v-btn>

                <v-btn
                    dark
                    class="mb-2 mr-2"
                    @click="reset()"
                >重置
                </v-btn>

                <v-btn
                    dark
                    class="mb-2 mr-2"
                    :to="`/app/qa/create`"
                >新增
                </v-btn>

            </v-col>
        </v-row>
       
        <v-data-table
            item-key="id"
            :headers="headers"
            :items="items"
            class="elevation-1"
            no-data-text="没有数据..."
            :page.sync="pageNo"
            :items-per-page="pageSize"
            hide-default-footer
        >
            <template v-slot:[`item.actions`]="{ item }">
                <v-btn small depressed :to="`/app/qa/edit/${item.id}`">编辑</v-btn>
                <v-btn small depressed  @click="deleteItem(item)">删除</v-btn>
            </template>
        </v-data-table>

        <v-row v-if="items.length > 0 && totalPage >= 1" class="mt-2">
            <v-col cols="12">
                <v-pagination
                    v-model="pageNo"
                    :length="totalPage"
                    :total-visible="7"
                    @input="onPageChange"
                ></v-pagination>
            </v-col>
        </v-row>

        <v-dialog v-model="dialogDelete" max-width="400px">
          <v-card v-if="itemToDelete">
            <v-card-title class="text-h5">删除 {{itemToDelete.title}}?</v-card-title>
            <v-card-actions>
              <v-spacer></v-spacer>
              <v-btn depressed @click="dialogDelete = false">取消</v-btn>
              <v-btn depressed color="error" @click="confirmDelete" :loading="deleting">确定</v-btn>
              <v-spacer></v-spacer>
            </v-card-actions>
          </v-card>
        </v-dialog>
    </div>
</template>

<script>
    import axios from "axios";

    export default {
        data: () => ({
            headers: [
                { text: '序号', value: 'id' },
                { text: '标题', value: 'title' },
                { text: '排序', value: 'order' },
                { text: '操作', value: 'actions', sortable: false },
            ],
            items: [],
            pageNo: 1,
            pageSize: 20,
            totalPage: 0,
            deleting: false,
            queryTitle: '',
            dialogDelete: false,
            itemToDelete: null
        }),

        created() {
            this.loadList();
        },

        methods: {
            loadList() {
                const params = Object.entries({ 
                    pageSize: this.pageSize, 
                    page: this.pageNo, 
                    title: this.queryTitle ? this.queryTitle : '', 
                }).reduce((a,[k,v]) => (v ? (a[k]=v, a) : a), {});

                axios.get(`/app/qa`, {
                    params: params
                }).then((response) => {
                    if(response.data.data.length >= 0) {
                        this.items = response.data.data;
                        this.totalPage = response.data.last_page;
                    }
                })
                .catch(function () {})
                .then(function () {
                });
            },

            onPageChange() {
                this.loadList();
            },

            query() {
                this.pageNo = 1;
                this.loadList();
            },

            reset() {
                this.queryTitle = '';
                this.pageNo = 1;
                this.loadList();
            },

            deleteItem(item) {
                this.itemToDelete = item;
                this.dialogDelete = true;
            },
            confirmDelete() {
                this.deleting = true;
                const that = this;
                axios.delete(`/app/qa/${this.itemToDelete.id}`).then((response) => {
                    if (response.data.code == 0) {
                       this.loadList();
                       this.dialogDelete = false;
                       this.itemToDelete = null;
                    }

                    this.$toast.open({
                        message: response.data.msg,
                        type: response.data.code == 0 ? 'success' : 'error',
                        position: 'top-right',
                    });
                })
                .catch(function () {})
                .then(function () {
                     that.deleting = false;
                });
            }
        }
    }
</script>
